<template>
  <div class="financial-situation">
    <div class="financial-situation__select">
      <div class="financial-situation__select-other">
        <el-select v-model="type" size="mini" @change="getData">
            <el-option
              v-for="(item, i) in typeList"
              :key="i"
              :label="item.laber"
              :value="item.value"
              >
            </el-option>
          </el-select>
      </div>
      <div class="financial-situation__select-date">
        <el-date-picker
          v-model="dayTime"
          type="month"
          :clearable="false"
          size="mini"
          value-format="yyyy-MM"
          format="yyyy年M月"
          @change="getData">
        </el-date-picker>
      </div>
      <el-checkbox v-model="checked" @change="getData">昨日</el-checkbox>
    </div>
    <div class="financial-situation__chart">
      <ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend" width="98%" height="12rem" :colors="colors"></ve-histogram>
    </div>
    <div class="financial-situation__select">
      <div class="financial-situation__select-year">
        <el-date-picker
          v-model="dayTime2"
          type="year"
          :clearable="false"
          size="mini"
          value-format="yyyy"
          format="yyyy年"
          @change="getSjData">
        </el-date-picker>
      </div>
    </div>
    <div class="financial-situation__chart">
      <ve-histogram :data="chartData2" :settings="chartSettings2" :extend="chartExtend2" width="98%" height="12rem" :colors="colors2"></ve-histogram>
    </div>
    <div class="financial-situation__select">
      <div class="financial-situation__select-city">
        <el-select v-model="city" size="mini" @change="getPieData">
            <el-option
              v-for="(item, i) in cityList"
              :key="i"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
      </div>
    </div>
    <div class="financial-situation__pie">
      <ve-pie :data="pieData" :settings="pieSettings" :extend="pieExtend" width="100%" height="9rem"></ve-pie>
      <ve-pie :data="pieData2" :settings="pieSettings" :extend="pieExtend2" width="100%" height="9rem"></ve-pie>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import { getCwsf, getCwsj, getCwzc } from 'src/api/api'
import { formatDate, formatFontSize, getDay, getLastMonth, getFirstDay } from 'js/utils'
import { Select, Option, DatePicker, Checkbox } from 'element-ui'
import Histogram from 'v-charts/lib/histogram.common'
import Vpie from 'v-charts/lib/pie.common'
import storage from 'good-storage'

export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Histogram.name]: Histogram,
    [DatePicker.name]: DatePicker,
    [Checkbox.name]: Checkbox,
    [Vpie.name]: Vpie,
  },
  data() {
    this.colors = ['rgba(91,218,117,0.83)', '#FF99A9']
    this.colors2 = ['#0A8CFF']
    return {
      checked: false,
      // dayTime: formatDate('yyyy-mm-dd', new Date()) === formatDate('yyyy-mm-dd', getFirstDay()) ? formatDate('yyyy-mm',getLastMonth()) : formatDate('yyyy-mm', new Date()),
      dayTime: '',
      dayTime2: '2019',
      cityList: storage.get('cityList'),
      city: '大庆',
      typeList: [
        {
          laber: '总收费',
          value: '0'
        },
        {
          laber: '物业费',
          value: '1'
        },
        {
          laber: '能耗费',
          value: '2'
        },
        {
          laber: '地下停车管理费',
          value: '3'
        },
        {
          laber: '地面停车费',
          value: '4'
        },
        {
          laber: '代收水电费',
          value: '-1'
        },
        {
          laber: '其他收费',
          value: '7'
        },
      ],
      type: '0',
      chartSettings: {
        legend: {
          show: false
        },
        showLine: ['sfbz'],
        labelMap: {
          'zsf': '收费',
          'sfbz': '收费标准'
        },
      },
      chartExtend: {
        title: {
          text: '各城市收费情况柱状图',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          right: 0,
          top: 0,
        },
        tooltip: {
          show: true,
        },
        legend: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 50000,
          splitNumber: 10,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '0',  
        },
        series: {
          // type: 'bar' || 'line',
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
            formatter: param => {
              let target = ''
              if(param.seriesType == 'bar') {
                target = param.data
              }else if(param.seriesType == 'line') {
                target = ''
              }
              return target
            }
          },
          // itemStyle: {
          //   color: new echarts.graphic.LinearGradient(
          //     0, 0, 0, 1,
          //     [
          //         {offset: 0, color: 'rgba(91,218,117,0.83)'},
          //         {offset: 1, color: 'rgba(1,118,25,0.2)'}
          //     ]
          //   ),
          // },
        },
      },
      chartSettings2: {
        legend: {
          show: false
        },
      },
      chartExtend2: {
        title: {
          text: '各城市年度税金柱状图',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          right: 0,
          top: 0,
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#8EC7DC',
            fontSize: formatFontSize(0.12),
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 50,
          splitNumber: 10,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '0',  
        },
        series: {
          barWidth: 25,
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
        },
      },
      chartData2: {
        columns: ['city', 'sj'],
        rows: []
      },
      chartData: {
        columns: ['city', 'zsf'],
        rows: []
      },
      pieSettings: {
        radius: formatFontSize(0.4),
        // offsetY: 100,
        // labelLine: {
        //   length: 5,
        //   length2: 5,
        // },
        label: {
          show: true,
          // position: 'inner',
          // color: '#0B153A',
          fontSize: formatFontSize(0.1)
        },
        labelLine: {
          length: formatFontSize(0.05),
          length2: formatFontSize(0.05),
        },
      },
      pieExtend: {
        title: {
          text: '固定资产',
          textStyle: {
            color: '#7CA1D2',
            fontSize: formatFontSize(0.10),
          },
          left: '42%',
          bottom: '0%',
        },
        tooltip: {
          show: true,
          position: ['35%', '40%'],
        },
        legend: {
          show: false,
          // textStyle: {
          //   color: '#fff',
          //   fontSize: formatFontSize(0.12),
          // },
          // selectedMode: false,
          // orient: 'vertical',
          // align: 'left',
          // right: 0, 
          // // left: 0,
          // // top: 40,
          // bottom: '40%',
          // itemWidth: formatFontSize(0.12),
          // itemHeight: formatFontSize(0.06),
        },
        series: {
          center: ['50%', '45%']
        },
        // grid: {  
        //   left: '0',  
        //   right: '0',
        //   top: '20%',
        //   bottom: '0',  
        // },
        color: ['#ED5753', '#F7A0AE', '#E56F81', '#0A8CFF', '#39E4D6', '#0E962A','#784DE6', '#EC952F', '#FFEA00'],
      },
      pieExtend2: {
        title: {
          text: '无形资产',
          textStyle: {
            color: '#7CA1D2',
            fontSize: formatFontSize(0.10),
          },
          left: '27%',
          bottom: '0%',
        },
        tooltip: {
          show: true,
          position: ['30%', '50%'],
        },
        legend: {
          show: false,
          // textStyle: {
          //   color: '#fff',
          //   fontSize: formatFontSize(0.12),
          // },
          // selectedMode: false,
          // orient: 'vertical',
          // align: 'left',
          // right: 0, 
          // // left: 0,
          // // top: 20,
          // bottom: '40%',
          // itemWidth: formatFontSize(0.12),
          // itemHeight: formatFontSize(0.06),
        },
        series: {
          center: ['35%', '40%']
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '0',  
        },
        color: ['#0A8CFF', '#0E962A', '#FFEA00'],
      },
      pieData: {
        columns: ['name', 'value'],
        rows: []
      },
      pieData2: {
        columns: ['name', 'value'],
        rows: []
      },
    }
  },
  mounted() {
    if(formatDate('yyyy-mm-dd', new Date()) === formatDate('yyyy-mm-dd', getFirstDay())) {
      this.dayTime = getLastMonth()
    } else if(formatDate('yyyy-mm-dd', new Date()) === formatDate('yyyy-mm-dd', new Date(new Date().getFullYear(), new Date().getMonth(), 2))) {
      this.dayTime = getLastMonth()
    } else {
      this.dayTime = formatDate('yyyy-mm', new Date())
    }
    this.getData()
    this.getSjData()
    this.getPieData()
  },
  methods: {
    getData() {
      let params = {}
      if(this.checked) {
        params = {
         dayTime: getDay('-1', '-'),
         type: this.type
        }
      } else {
        params = {
          dayTime: this.dayTime,
          type: this.type
        }
      }
      getCwsf(params).then(res=> {
        if(this.type === '0') {
          this.chartData.columns = ['city', 'zsf','sfbz']
        } else {
          this.chartData.columns = ['city', 'zsf']
        }
        this.chartData.rows = res.data
      })
    },
    getSjData() {
      const params = {
        dayTime: this.dayTime2
      }
      getCwsj(params).then(res=>{
        this.chartData2.rows = res.data
      })
    },
    getPieData() {
      const params = {
        city: this.city
      }
      getCwzc(params).then(res=>{
        this.pieData.rows = [
          { 'name': '房屋建筑数', 'value': res.data.f1 },
          { 'name': '机器', 'value': res.data.f2 },
          { 'name': '机械和其他生产设备数', 'value': res.data.f3 },
          { 'name': '与生产经营活动有关的器具、工具、家具等', 'value': res.data.f4 },
          { 'name': '运输工具', 'value': res.data.f5 },
          { 'name': '电子设备', 'value': res.data.f6 },
          { 'name': '其他资产', 'value': res.data.f7 }
        ]
        this.pieData2.rows = [
          { 'name': '专利权数', 'value': res.data.zlqs },
          { 'name': '商标权数', 'value': res.data.sbqs },
          { 'name': '软件权数', 'value': res.data.rjqs }
        ]
      })
    }
  },
}
</script>
<style lang="scss">
.financial-situation {
  // padding: 10px 0px 10px;
  &__select {
    text-align: right;
    padding: 5px 20px 0px 0px;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor{
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-date {
      margin-right: 20px;
      .el-date-editor {
        width: 135px;
      }
    }
    &-year {
      .el-date-editor {
        width: 130px;
      }
    }
    &-other {
      margin-right: 20px;
      .el-select {
        width: 150px;
      }
    }
    &-city {
      .el-select {
        width: 100px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
  }
  &__pie {
    display: flex;
  }
}
</style>